1 00:00:00,810 --> 00:00:02,170 Hello and welcome. 2 00:00:02,250 --> 00:00:10,800 In this lecture we are going to create the structure for our app using hastier mail. 3 00:00:11,100 --> 00:00:13,830 This is the hastier mail. 4 00:00:13,830 --> 00:00:17,960 I've got some basic tags already in here. 5 00:00:18,180 --> 00:00:21,020 Hi will be built on top of this. 6 00:00:21,150 --> 00:00:24,690 So these are just some basic tags are just run through them. 7 00:00:24,780 --> 00:00:27,410 I'm sure you are familiar with them already. 8 00:00:27,480 --> 00:00:31,640 Like one here is not truly part of hastier mould document. 9 00:00:31,710 --> 00:00:39,600 It's a declaration basically said to tell the web browsers and search engines. 10 00:00:39,690 --> 00:00:42,750 This document is in paste here Miller document. 11 00:00:42,780 --> 00:00:48,450 So they had all the email documents is from line 2 to 14. 12 00:00:48,960 --> 00:00:54,930 Most tags came with opening and close into the opening e mail online too. 13 00:00:55,130 --> 00:00:57,260 They close in online 14. 14 00:00:57,330 --> 00:01:06,930 You can tell the difference because we close in there so forward slash before the name of the tag the 15 00:01:06,930 --> 00:01:11,810 hastier mill consists of other child elements. 16 00:01:12,450 --> 00:01:19,470 I have invented the code a little bit so you can see the distinct distinction between the child and 17 00:01:19,470 --> 00:01:20,480 the parent. 18 00:01:20,520 --> 00:01:26,170 So looking at the code here the head the body tags. 19 00:01:26,350 --> 00:01:29,670 But children of the hastier male element. 20 00:01:29,900 --> 00:01:36,680 Wow the men that tagged the title and the link are child elements of the head. 21 00:01:37,040 --> 00:01:42,440 The script tag is the child element of the body tag. 22 00:01:42,450 --> 00:01:49,930 So lie for is embedded with an attribute called Cast set. 23 00:01:49,990 --> 00:01:51,900 The valley is utf dash. 24 00:01:51,960 --> 00:01:54,320 This is the encoding type. 25 00:01:54,340 --> 00:02:03,600 It describes the type of encoding used lime five is a medder car set to metal tag with a attribute of 26 00:02:03,600 --> 00:02:13,380 name value of viewport And also another attribute called content and the value set to with equal device 27 00:02:13,410 --> 00:02:17,850 minus width comma initial that skill 28 00:02:20,430 --> 00:02:24,200 equals one line. 29 00:02:24,200 --> 00:02:30,820 5 like 5 is basically saying is that in the device regardless of the screen size. 30 00:02:30,850 --> 00:02:33,850 Can you this web page. 31 00:02:33,870 --> 00:02:35,800 That's what it's saying. 32 00:02:36,690 --> 00:02:45,510 So Line 5 the viewport refers to this screen size which means the page can be this big is responsive 33 00:02:45,800 --> 00:02:54,320 so that it will respond to any screen size the viewport is the value for that name attribute. 34 00:02:54,450 --> 00:02:56,680 The content should be there. 35 00:02:56,760 --> 00:03:04,950 The content attribute basically gives you the minors Kwas device minus with what they saying is that 36 00:03:04,980 --> 00:03:13,600 regardless of the size of the screen you can fit it to view this web page and it gives an initial scale 37 00:03:13,620 --> 00:03:17,830 as well which means you can zoom in on the initial scale. 38 00:03:17,870 --> 00:03:24,570 The initial part where you zoom from where the zoom in actually release starts you can zoom in and zoom 39 00:03:24,570 --> 00:03:25,370 out. 40 00:03:25,380 --> 00:03:28,880 Line 6 is the title line 7. 41 00:03:28,900 --> 00:03:33,340 Here's a link to the style sheet we created earlier. 42 00:03:33,450 --> 00:03:42,150 The blank one and line 9 to 13 is a body tag and inside the body tag is this great tag. 43 00:03:42,190 --> 00:03:44,400 It's always good to play a descriptor. 44 00:03:44,430 --> 00:03:52,920 Just before the close embody tag so it gives the page it allows the page to load fully before any script 45 00:03:53,040 --> 00:03:56,090 is executed. 46 00:03:56,250 --> 00:04:05,580 The actual visible content that a visitor sees on a web page is actually the content that is placed 47 00:04:05,610 --> 00:04:10,230 between the body TAC or like content between the body tag is visible. 48 00:04:10,470 --> 00:04:15,540 The head section is just for informational reference purposes. 49 00:04:15,540 --> 00:04:22,560 So we're going to add some more tags here in between the body tack to create development for each of 50 00:04:22,560 --> 00:04:24,270 the balloons. 51 00:04:25,410 --> 00:04:36,110 I have created a Deve here online 10 kord day and giving it a class of wrap up line 14 is close deep 52 00:04:36,150 --> 00:04:36,920 in between. 53 00:04:37,030 --> 00:04:42,240 The devil wrap the balloon so the balloons will be enclosed within this Dave. 54 00:04:44,850 --> 00:04:53,550 I have created some more deep I've created online 11 they have created a head in tag which will provide 55 00:04:53,580 --> 00:04:58,200 a title for our app line 12. 56 00:04:58,380 --> 00:04:59,100 Did. 57 00:04:59,580 --> 00:05:02,360 With a diva idea of you know Paula. 58 00:05:02,360 --> 00:05:10,590 So this Deve idea will use tostada later we also include it a span and give it the giving this band 59 00:05:10,650 --> 00:05:25,470 a class halsell or so on in 40 sorry line 15 year d'asti close indeed for this rapper deep rapper. 60 00:05:25,500 --> 00:05:31,740 So we're going to create more DBS that will house each of the balloons. 61 00:05:32,160 --> 00:05:42,110 So the Dave online 12 will be used to display a text when or the balloons have been popped. 62 00:05:43,190 --> 00:05:49,220 I have created are nother div online 13 ending online 15. 63 00:05:49,350 --> 00:05:57,090 So Dave here online 13 core beland Gallery in between is deaves is where we'll create the individual 64 00:05:57,180 --> 00:06:01,700 deaves that wall house the individual balance. 65 00:06:01,700 --> 00:06:05,710 So we're going to create 24 balance. 66 00:06:06,150 --> 00:06:13,470 So I've created some individual dates for the balance saw line 14 15 and 16. 67 00:06:13,470 --> 00:06:16,150 You can see online 14 they got Dave. 68 00:06:16,240 --> 00:06:23,130 I did so each of Diddy's folded balloons will have their own I.D. So you've got the I.D. attributes 69 00:06:23,160 --> 00:06:25,930 of boulogne defers what will be zero. 70 00:06:26,210 --> 00:06:31,170 And going down to one to two twenty three. 71 00:06:31,260 --> 00:06:35,520 So we created three of the balloons so far. 72 00:06:35,520 --> 00:06:42,390 So I'm going to add the rest so all you have to do the next one will be Deve Heidi equals berland 3. 73 00:06:42,420 --> 00:06:42,880 Right. 74 00:06:42,900 --> 00:06:43,190 OK. 75 00:06:43,200 --> 00:06:45,390 Two twenty three. 76 00:06:45,390 --> 00:06:49,440 So I'm going to do them and then add them to the code. 77 00:06:50,460 --> 00:06:55,990 So I have now dead the code for the rest of the balance. 78 00:06:56,180 --> 00:06:58,680 There are 24 balloons in total. 79 00:06:58,680 --> 00:07:03,060 The first ones have got an idea of zero right or two. 80 00:07:03,060 --> 00:07:03,930 Twenty three. 81 00:07:03,930 --> 00:07:05,240 So they have higher. 82 00:07:05,250 --> 00:07:10,530 This is how the device for the balloons have been created. 83 00:07:10,530 --> 00:07:14,570 Dave's a just it's just a diversion on a page. 84 00:07:14,850 --> 00:07:15,480 Okay. 85 00:07:15,510 --> 00:07:21,360 And then right at the bottom I'm OK on my script that's where I will make a reference to my javascript 86 00:07:21,900 --> 00:07:26,370 that will create the functionality for this app. 87 00:07:26,370 --> 00:07:28,240 So let me just bring that up here. 88 00:07:28,260 --> 00:07:36,910 You can see that the code is also indented in a way that you can differentiate the parent child relationship. 89 00:07:36,930 --> 00:07:37,370 All right. 90 00:07:37,380 --> 00:07:44,660 Let me just say this then we can view and see what it looks like at the moment. 91 00:07:44,660 --> 00:07:54,390 SA just open up the directory on my desktop and click on INDEX and that you show us what this structure 92 00:07:54,390 --> 00:07:54,930 looks like. 93 00:07:54,930 --> 00:07:57,690 So this is what the structure looks like at the moment. 94 00:07:57,690 --> 00:08:04,200 We the barlows are not pronounced yet will need success to make them pronounced. 95 00:08:04,200 --> 00:08:06,170 So that's it for this shot. 96 00:08:06,180 --> 00:08:07,260 Thanks for watching. 97 00:08:07,290 --> 00:08:07,930 By phone.